<template>
    <div id="allmap" ref="allmap"></div>
</template>

<script>

export default {
  name: 'TestBaiDu',
  data(){
    return{
      MapPoint:[

      ],
      GetPoint: {
        x: '',
        y: '',
      }
    }
  },
  methods: {

    map: function () {
      let map = new window.BMap.Map(this.$refs.allmap, {mapType: BMAP_HYBRID_MAP,minZoom:6,maxZoom:12}); // 创建Map实例
      map.centerAndZoom(new window.BMap.Point(106.695095, 26.597569), 8); // 初始化地图,设置中心点坐标和地图级别
      map.setCurrentCity("贵阳"); // 设置地图显示的城市 此项是必须设置的
      map.disableDoubleClickZoom();
      map.enableScrollWheelZoom();
      this.$axios.get('/maps').then(resp => {
        console.log(resp.data)
       this.MapPoint=resp.data
        //设置标注的经纬度
        this.MapPoint.forEach(function (value) {
          var marker = new BMap.Marker(new window.BMap.Point(value.pointX, value.pointY));
          //把标注添加到地图上
          map.addOverlay(marker);
          var content = "<table>";
          content = content + "<tr><td>"+" 编号："+value.id+"</td></tr>";
          content = content + "<tr><td>" +"名称:"+value.addressName+"</td></tr>";
          content = content + "<tr><td>"+"坐标:("+value.pointX+","+value.pointY+")"+"</td></tr>";
          content += "</table>";
          var infowindow = new BMap.InfoWindow(content);
          marker.addEventListener("click", function () {
            this.openInfoWindow(infowindow);
          });
        })
      })
      return map;
    },
   showInfo(e) {
    this.GetPoint.x=e.point.lng;
    this.GetPoint.y=e.point.lat;
    console.log(this.GetPoint.x);
    this.$emit('setPoint',this.GetPoint.x,this.GetPoint.y);
   },

    addMapEvent() {
      let map=this.map();
      map.addEventListener('click', this.showInfo);
    },



  },
  mounted() {
    this.map();

  },

}
</script>

<style scoped>
#allmap {
  height: 100%;
  width: 100%;

}
</style>
